<!-- 手术跟台采购需求单-->
<template>
  <div class="purchasing-purchase-operation">
    <el-container class="registercard-box">
      <!-- 输入框模块 -->
      <el-header
        height="auto"
        class="header-limit">
        <tabs
          :tabs-arr="tabList"
          @returnIndex="handleReturnIndex" />
        <el-form
          ref="operationForm"
          :inline="true"
          label-width="100px"
          class="demo-ruleForm"
          :model="operationForm"
        >
          <el-form-item
            label="配送商"
            prop="deliveryName">
            <el-input
              placeholder="请输入"
              v-model="operationForm.deliveryName"
            />
          </el-form-item>
          <el-form-item
            label="平台订单编号"
            prop="purchaseOrderCode">
            <el-input
              placeholder="请输入"
              v-model="operationForm.purchaseOrderCode"
            />
          </el-form-item>
          <el-form-item
            label="下单时间"
            prop="submitDateArr">
            <el-date-picker
              v-model="operationForm.submitDateArr"
              type="daterange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm">
              <i class="el-icon-refresh-right" />
              重置</el-button
              >
            <el-button
              type="primary"
              @click="searchForm"
              :class="{isAddWidth: submitLoading}"
              :loading="submitLoading"
            >
              <i
                class="el-icon-search"
                :class="{isdisplay: submitLoading}" />
              {{ submitLoading ? '' : '查询' }}</el-button
          ></el-form-item
          >
        </el-form>
      </el-header>
      <!-- 表单模块 -->
      <el-editable
        class="hospital-edit-box"
        v-loading="operationForm.tableLoading"
        :data="table.settlemList"
        height="200"
        :columns="releasecolumns"
        :custom-attr="$TABLE_HEAD['beforedistributor.purchasing.purchase.operationFollowUp']"
      >
        <template
          slot="default-orderTotalAmount"
          slot-scope="scope">
          <span class="price">{{
            scope.row.orderTotalAmount | getFormatterPrice
          }}</span>
        </template>
        <template
          slot="default-updatedAta"
          slot-scope="scope">
          <span class="price">{{ scope.row.updatedAta | getFormatterPrice }}</span>
        </template>
        <template
          slot="default-action"
          slot-scope="scope">
          <el-button
            type="text"
            @click="goDetail(scope)">详情</el-button>
            <!-- <el-button
            type="text"
            @click="goHarvest(scope)"
          >
            验收</el-button> -->
        </template>
      </el-editable>
      <!-- 分页模块 -->

      <el-pagination
        align="right"
        style="margin-top:20px;"
        @size-change="sizeChange"
        @current-change="pageChange"
        :page-sizes="page.PAGE_NUMBER"
        :page-size="page.size"
        :current-page="page.page"
        :layout="page.PAGINATION_LAYOUT"
        :total="page.total"
      />
    </el-container>
  </div>
</template>

<script>
import { deliveryOcBsOrderSixneed } from '@const/beforeSettleApi'
import tabs from '@components/tabs'
import { releasecolumns, tabList } from './const'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import paginationMixin from '@mixins/paginationMixin'
import { getCertificateList } from '@const/api'
import ElEditable from '@components/el-editable'
import { authItemInStoreQuery } from '@const/productCenterApiV2'
import { formatDate, getFormatterPrice } from '@const/filter.js'
import { hasIn } from 'lodash'
export default {
  name: 'PurchasingPurchaseOperation',
  mixins: [paginationMixin],
  components: { ElEditable, tabs },
  data () {
    return {
      tabList,
      tabIndex: '',
      activeName: '1',
      submitLoading: false,
      operationForm: {
        submitDateArr: [], // 有效期至
        tableLoading: false,
        deliveryName: '', // 配送商
        purchaseOrderCode: '' // 平台订单编号
      },
      table: {
        settlemList: []
      },
      releasecolumns,
      page: {
        PAGE_NUMBER,
        PAGINATION_LAYOUT
      }
    }
  },
  filters: {
    getFormatterPrice
  },
  mounted () {
    this.getItems()
  },
  methods: {
    // 获取列表
    getItems () {
      // Loading加载开始
      this.operationForm.tableLoading = true
      this.submitLoading = true
      // 请求列表数据
      this.$axios({
        method: 'post',
        url: deliveryOcBsOrderSixneed,
        data: {
          ...this.operationForm,
          page: this.page.page,
          pageSize: this.page.size,
          orderStatus: this.tabIndex || null, // 状态切换
          orderType: 2,
          startTime:
            formatDate(this.operationForm.submitDateArr[0], 'YYYY-MM-DD') || null,
          endTime:
            formatDate(this.operationForm.submitDateArr[1], 'YYYY-MM-DD') || null
        }
      })
        .then(res => {
          let obj = hasIn(res, 'data.payload') ? res.data.payload : {}
          this.table.settlemList = obj.content
          this.page.total = obj.totalElements
        })
        .finally(res => {
          this.submitLoading = false
          this.operationForm.tableLoading = false
        })
    },
    // 详情
    goDetail (scope) {
      this.$router.push({
        path:
          '/distributorSide/purchasingManagement/purchaseOrderTracking/operationFollowUp/detail',
        query: {
          id: scope.row.id
        }
      })
    },
    // 验收
    goHarvest () {
      this.$router.push({
        path:
          '/distributorSide/purchasingManagement/purchaseOrderTracking/operationFollowUp/check'
      })
    },
    handleReturnIndex (index) {
      this.tabIndex =
        this.tabList[index].name === null ? null : this.tabList[index].name
      this.page.page = 1
      this.getItems()
    },
    // 重置
    resetForm () {
      this.$refs.operationForm.resetFields()
    },
    // 查询
    searchForm () {
      this.page.page = 1
      this.getItems()
    }
  }

  // 获取列表
}
</script>
<style lang="less">
.purchasing-purchase-operation {
  height: 100%;
  display: flex;

  .registercard-box {
    flex-direction: column;

    .el-form-item__label {
      width: 110px !important;
    }
    .price {
      color: red;
    }
    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
  }
  .el-tabs {
    .el-tabs__header {
      .el-tabs__nav-wrap {
        &::after {
          display: none;
        }
        .is-active {
          font-size: 24px;
        }
      }
    }
  }
  .header-limit {
    .el-input__inner {
      width: 200px;
    }
    .el-date-editor {
      width: 368px;
    }
  }
}
</style>
